/* * @Author: Zhengxuan Ye * @Date: 2025-05-06 21:28:38 * @Last Modified by: Zhengxuan Ye * @Last
Modified time: 2025-05-06 21:28:38 */

<template>
  <div class="admin-container">
    <!-- 侧边栏导航 -->
    <div class="admin-sidebar">
      <div class="admin-logo">
        <h1>后台管理系统</h1>
      </div>
      <nav class="admin-nav">
        <div
          class="nav-item"
          :class="{ active: activeNav === 'dashboard' }"
          @click="activeNav = 'dashboard'"
        >
          <span class="nav-icon">📊</span>
          <span class="nav-text">数据概览</span>
        </div>
        <div
          class="nav-item"
          :class="{ active: activeNav === 'heritage' }"
          @click="activeNav = 'heritage'"
        >
          <span class="nav-icon">🏛️</span>
          <span class="nav-text">遗产管理</span>
        </div>
        <div
          class="nav-item"
          :class="{ active: activeNav === 'users' }"
          @click="activeNav = 'users'"
        >
          <span class="nav-icon">👥</span>
          <span class="nav-text">用户管理</span>
        </div>
        <div
          class="nav-item"
          :class="{ active: activeNav === 'comments' }"
          @click="activeNav = 'comments'"
        >
          <span class="nav-icon">💬</span>
          <span class="nav-text">评论管理</span>
        </div>
        <div
          class="nav-item"
          :class="{ active: activeNav === 'events' }"
          @click="activeNav = 'events'"
        >
          <span class="nav-icon">🎯</span>
          <span class="nav-text">活动管理</span>
        </div>
        <div
          class="nav-item"
          :class="{ active: activeNav === 'settings' }"
          @click="activeNav = 'settings'"
        >
          <span class="nav-icon">⚙️</span>
          <span class="nav-text">系统设置</span>
        </div>
      </nav>
      <div class="admin-logout" @click="handleLogout">
        <span class="nav-icon">🚪</span>
        <span class="nav-text">退出登录</span>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="admin-content">
      <!-- 顶部信息栏 -->
      <header class="admin-header">
        <div class="header-welcome">
          <h2>欢迎回来，{{ username }}</h2>
          <p>{{ currentDate }}</p>
        </div>
        <div class="header-actions">
          <div class="action-item">
            <span class="action-icon">🔔</span>
            <span class="notification-badge">3</span>
          </div>
          <div class="action-item">
            <span class="action-icon">✉️</span>
            <span class="notification-badge">5</span>
          </div>
          <div class="user-avatar">
            <span>{{ username.charAt(0) }}</span>
          </div>
        </div>
      </header>

      <!-- 内容区域 -->
      <main class="admin-main">
        <!-- 数据概览面板 -->
        <div v-if="activeNav === 'dashboard'" class="dashboard-container">
          <h2 class="panel-title">数据概览</h2>

          <div v-if="loading" class="loading-indicator">
            <p>加载数据中...</p>
          </div>

          <div v-else-if="error" class="error-message">
            <p>{{ error }}</p>
            <button @click="loadInteractionStats" class="reload-btn">重新加载</button>
          </div>

          <div v-else>
            <!-- 数据卡片 -->
            <div class="stat-cards">
              <div class="stat-card">
                <div class="stat-icon heritage-icon">🏛️</div>
                <div class="stat-info">
                  <h3>遗产项目</h3>
                  <p class="stat-number">{{ totalStats.totalPages }}</p>
                  <p class="stat-description">有互动数据的页面数量</p>
                </div>
              </div>

              <div class="stat-card">
                <div class="stat-icon users-icon">👥</div>
                <div class="stat-info">
                  <h3>用户互动</h3>
                  <p class="stat-number">
                    {{ totalStats.totalLikes + totalStats.totalComments + totalStats.totalShares }}
                  </p>
                  <p class="stat-description">累计互动次数</p>
                </div>
              </div>

              <div class="stat-card">
                <div class="stat-icon views-icon">👍</div>
                <div class="stat-info">
                  <h3>点赞数量</h3>
                  <p class="stat-number">{{ totalStats.totalLikes }}</p>
                  <p class="stat-description">累计点赞数量</p>
                </div>
              </div>

              <div class="stat-card">
                <div class="stat-icon comments-icon">💬</div>
                <div class="stat-info">
                  <h3>用户评论</h3>
                  <p class="stat-number">{{ totalStats.totalComments }}</p>
                  <p class="stat-description">累计评论数量</p>
                </div>
              </div>
            </div>

            <!-- 页面互动数据 -->
            <div class="page-interactions">
              <h3 class="section-title">页面互动数据</h3>

              <div v-if="interactionStats.length === 0" class="no-data-message">
                <p>暂无互动数据</p>
              </div>

              <div v-else class="table-container">
                <table class="data-table">
                  <thead>
                    <tr>
                      <th>页面名称</th>
                      <th>点赞数</th>
                      <th>评论数</th>
                      <th>分享数</th>
                      <th>总互动</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="stat in interactionStats" :key="stat.page_id">
                      <td>{{ getPageName(stat.page_id) }}</td>
                      <td>{{ stat.likes_count }}</td>
                      <td>{{ stat.comments_count }}</td>
                      <td>{{ stat.shares_count }}</td>
                      <td>{{ stat.likes_count + stat.comments_count + stat.shares_count }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 快捷操作 -->
            <div class="quick-actions">
              <h3 class="section-title">快捷操作</h3>
              <div class="action-buttons">
                <button class="action-button" @click="loadInteractionStats">
                  <span class="button-icon">🔄</span>
                  <span class="button-text">刷新数据</span>
                </button>

                <button class="action-button" @click="activeNav = 'comments'">
                  <span class="button-icon">💬</span>
                  <span class="button-text">查看评论</span>
                </button>

                <button class="action-button" @click="activeNav = 'users'">
                  <span class="button-icon">👥</span>
                  <span class="button-text">用户管理</span>
                </button>

                <button class="action-button" @click="activeNav = 'settings'">
                  <span class="button-icon">⚙️</span>
                  <span class="button-text">系统设置</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 遗产管理面板 -->
        <div v-if="activeNav === 'heritage'" class="heritage-container">
          <h2 class="panel-title">遗产管理</h2>
          <p class="panel-description">管理所有非物质文化遗产项目，包括添加、编辑、删除等操作。</p>

          <!-- 这里是遗产管理的功能区，可根据需要扩展 -->
          <div class="function-placeholder">
            <p>遗产管理功能正在开发中...</p>
          </div>
        </div>

        <!-- 用户管理面板 -->
        <div v-if="activeNav === 'users'" class="users-container">
          <h2 class="panel-title">用户管理</h2>
          <p class="panel-description">管理系统用户，包括用户权限设置、账号状态等。</p>

          <!-- 这里是用户管理的功能区，可根据需要扩展 -->
          <div class="function-placeholder">
            <p>用户管理功能正在开发中...</p>
          </div>
        </div>

        <!-- 评论管理面板 -->
        <div v-if="activeNav === 'comments'" class="comments-container">
          <h2 class="panel-title">评论管理</h2>
          <p class="panel-description">审核和管理用户评论，处理举报内容等。</p>

          <div v-if="loading" class="loading-indicator">
            <p>加载评论数据中...</p>
          </div>

          <div v-else-if="error" class="error-message">
            <p>{{ error }}</p>
            <button @click="loadInteractionStats" class="reload-btn">重新加载</button>
          </div>

          <div v-else>
            <!-- 评论筛选工具栏 -->
            <div class="comments-toolbar">
              <div class="search-box">
                <input type="text" placeholder="搜索评论内容..." v-model="commentSearchQuery" />
                <button class="search-btn">🔍</button>
              </div>

              <div class="filter-options">
                <select v-model="commentPageFilter">
                  <option value="">所有页面</option>
                  <option
                    v-for="stat in interactionStats"
                    :key="stat.page_id"
                    :value="stat.page_id"
                  >
                    {{ getPageName(stat.page_id) }}
                  </option>
                </select>
              </div>
            </div>

            <!-- 评论列表 -->
            <div v-if="filteredComments.length === 0" class="no-data-message">
              <p>暂无评论数据</p>
            </div>

            <div v-else class="comments-list">
              <div v-for="(page, pageId) in groupedComments" :key="pageId" class="page-comments">
                <h3 class="page-title">{{ getPageName(pageId) }}</h3>

                <div class="comment-items">
                  <div v-for="comment in page" :key="comment.id" class="comment-item">
                    <div class="comment-header">
                      <div class="comment-user">
                        <span class="user-avatar">{{ comment.username.charAt(0) }}</span>
                        <span class="username">{{ comment.username }}</span>
                      </div>
                      <div class="comment-time">{{ formatDate(comment.created_at) }}</div>
                    </div>

                    <div class="comment-content">
                      {{ comment.content }}
                    </div>

                    <div class="comment-actions">
                      <button
                        class="action-btn delete-btn"
                        title="删除评论"
                        @click="handleDeleteComment(comment.id, pageId)"
                      >
                        <span>🗑️</span>
                      </button>
                      <button class="action-btn flag-btn" title="标记为违规">
                        <span>⚠️</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 活动管理面板 -->
        <div v-if="activeNav === 'events'" class="events-container">
          <h2 class="panel-title">活动管理</h2>
          <p class="panel-description">创建和管理非遗相关活动，包括线上和线下活动。</p>

          <!-- 这里是活动管理的功能区，可根据需要扩展 -->
          <div class="function-placeholder">
            <p>活动管理功能正在开发中...</p>
          </div>
        </div>

        <!-- 系统设置面板 -->
        <div v-if="activeNav === 'settings'" class="settings-container">
          <h2 class="panel-title">系统设置</h2>
          <p class="panel-description">管理网站基本设置，包括网站信息、备份恢复等。</p>

          <!-- 这里是系统设置的功能区，可根据需要扩展 -->
          <div class="function-placeholder">
            <p>系统设置功能正在开发中...</p>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../../stores/user'
import { useAdminStore } from '../../stores/admin'

export default {
  name: 'AdminView',
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    const adminStore = useAdminStore()

    // 活动导航选项
    const activeNav = ref('dashboard')

    // 用户信息
    const username = computed(() => userStore.user?.username || '管理员')
    const token = computed(() => userStore.token)
    const isAdmin = computed(() => userStore.isAdmin)

    // 检查是否是管理员
    watch(
      isAdmin,
      (newValue) => {
        if (newValue === false) {
          // 如果不是管理员，重定向到管理员登录页面
          router.push('/admin-login')
        }
      },
      { immediate: true },
    )

    // 统计数据
    const interactionStats = ref([])
    const loading = ref(false)
    const error = ref(null)

    // 评论管理相关
    const allComments = ref({}) // 格式: { pageId: [comments] }
    const commentSearchQuery = ref('')
    const commentPageFilter = ref('')

    // 统计汇总数据
    const totalStats = computed(() => {
      if (!interactionStats.value || interactionStats.value.length === 0) {
        return {
          totalLikes: 0,
          totalComments: 0,
          totalShares: 0,
          totalPages: 0,
        }
      }

      return {
        totalLikes: interactionStats.value.reduce((sum, item) => sum + item.likes_count, 0),
        totalComments: interactionStats.value.reduce((sum, item) => sum + item.comments_count, 0),
        totalShares: interactionStats.value.reduce((sum, item) => sum + item.shares_count, 0),
        totalPages: interactionStats.value.length,
      }
    })

    // 过滤后的评论
    const filteredComments = computed(() => {
      let result = []

      // 遍历所有页面的评论
      Object.entries(allComments.value).forEach(([pageId, comments]) => {
        // 如果设置了页面过滤，且不匹配当前页面，则跳过
        if (commentPageFilter.value && commentPageFilter.value !== pageId) {
          return
        }

        // 过滤评论内容
        const filtered = commentSearchQuery.value
          ? comments.filter((comment) =>
              comment.content.toLowerCase().includes(commentSearchQuery.value.toLowerCase()),
            )
          : comments

        result = result.concat(filtered.map((comment) => ({ ...comment, pageId })))
      })

      return result
    })

    // 按页面分组的评论
    const groupedComments = computed(() => {
      const result = {}

      filteredComments.value.forEach((comment) => {
        if (!result[comment.pageId]) {
          result[comment.pageId] = []
        }
        result[comment.pageId].push(comment)
      })

      return result
    })

    // 当前日期
    const currentDate = computed(() => {
      const date = new Date()
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long',
      })
    })

    // 加载交互统计数据
    const loadInteractionStats = async () => {
      try {
        loading.value = true
        error.value = null
        const stats = await adminStore.getInteractionStats(token.value)
        interactionStats.value = stats

        // 加载评论数据
        await loadAllComments()

        loading.value = false
      } catch (err) {
        error.value = err.message || '加载数据失败'
        loading.value = false
      }
    }

    // 加载所有页面的评论
    const loadAllComments = async () => {
      try {
        // 清空现有评论数据
        allComments.value = {}

        // 如果没有统计数据，直接返回
        if (!interactionStats.value || interactionStats.value.length === 0) {
          return
        }

        // 遍历所有有评论的页面
        const commentPages = interactionStats.value.filter((stat) => stat.comments_count > 0)

        // 并行加载所有页面的评论
        await Promise.all(
          commentPages.map(async (stat) => {
            try {
              // 使用interactionStore加载评论
              const pageId = stat.page_id
              const comments = await loadPageComments(pageId)

              if (comments && comments.length > 0) {
                allComments.value[pageId] = comments
              }
            } catch (error) {
              console.error(`加载页面 ${stat.page_id} 的评论失败:`, error)
            }
          }),
        )

        console.log('所有评论加载完成:', allComments.value)
      } catch (error) {
        console.error('加载评论失败:', error)
      }
    }

    // 加载单个页面的评论
    const loadPageComments = async (pageId) => {
      try {
        // 使用adminStore获取评论
        return await adminStore.getPageComments(pageId, token.value)
      } catch (error) {
        console.error(`加载页面 ${pageId} 的评论失败:`, error)
        return []
      }
    }

    // 删除评论
    const handleDeleteComment = async (commentId, pageId) => {
      if (!confirm('确定要删除这条评论吗？')) {
        return
      }

      try {
        loading.value = true
        const success = await adminStore.deleteComment(commentId, token.value)

        if (success) {
          // 从本地状态中移除评论
          if (allComments.value[pageId]) {
            allComments.value[pageId] = allComments.value[pageId].filter(
              (comment) => comment.id !== commentId,
            )
          }

          // 重新加载统计数据
          await loadInteractionStats()
        }

        loading.value = false
      } catch (error) {
        console.error('删除评论失败:', error)
        error.value = '删除评论失败'
        loading.value = false
      }
    }

    // 格式化日期
    const formatDate = (dateString) => {
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
      })
    }

    // 获取页面名称
    const getPageName = (pageId) => {
      const pageMap = {
        101: '景泰蓝制作技艺',
        102: '苏州刺绣',
        103: '京剧',
        104: '黄梅戏',
        201: '关于我们页面',
        // 可以根据需要添加更多页面映射
      }
      return pageMap[pageId] || `页面ID: ${pageId}`
    }

    // 退出登录
    const handleLogout = async () => {
      await userStore.logout()
      router.push('/login')
    }

    // 组件挂载时加载数据
    onMounted(async () => {
      await loadInteractionStats()
    })

    return {
      activeNav,
      username,
      currentDate,
      handleLogout,
      interactionStats,
      loading,
      error,
      totalStats,
      getPageName,
      loadInteractionStats,
      commentSearchQuery,
      commentPageFilter,
      filteredComments,
      groupedComments,
      formatDate,
      handleDeleteComment,
    }
  },
}
</script>

<style scoped>
.admin-container {
  display: flex;
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative; /* 为绝对定位的子元素提供参考 */
  height: 100%; /* 确保容器占满可用高度 */
}

/* 侧边栏样式 */
.admin-sidebar {
  width: 250px;
  background-color: var(--dark-color, #333);
  color: white;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%; /* 占满父容器高度 */
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 隐藏溢出内容 */
}

.admin-logo {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(0, 0, 0, 0.2);
}

.admin-logo h1 {
  font-size: 1.3rem;
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
  margin: 0;
  color: white;
}

.admin-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto; /* 只在导航区域添加滚动 */
  padding: 1rem 0;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent; /* Firefox */
}

/* 自定义滚动条样式 */
.admin-nav::-webkit-scrollbar {
  width: 4px;
}

.admin-nav::-webkit-scrollbar-track {
  background: transparent;
}

.admin-nav::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-item.active {
  background-color: var(--primary-color, #c53030);
}

.nav-icon {
  margin-right: 1rem;
  font-size: 1.2rem;
}

.admin-logout {
  padding: 0.8rem 1.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(0, 0, 0, 0.2);
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.admin-logout:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 主内容区域样式 */
.admin-content {
  flex: 1;
  padding: 1.5rem;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 顶部信息栏样式 */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.header-welcome h2 {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
  color: var(--dark-color, #333);
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
}

.header-welcome p {
  color: #666;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.action-item {
  position: relative;
  font-size: 1.3rem;
  cursor: pointer;
}

.notification-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--primary-color, #c53030);
  color: white;
  font-size: 0.7rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary-color, #c53030);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  cursor: pointer;
}

/* 主内容面板样式 */
.admin-main {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 2rem;
}

.panel-title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--dark-color, #333);
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
}

.panel-description {
  color: #666;
  margin-bottom: 2rem;
}

/* 数据概览样式 */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.stat-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 2rem;
  padding: 1rem;
  border-radius: 8px;
  min-width: 60px;
  min-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.heritage-icon {
  background-color: rgba(197, 48, 48, 0.1);
  color: var(--primary-color, #c53030);
}

.users-icon {
  background-color: rgba(54, 162, 235, 0.1);
  color: #36a2eb;
}

.views-icon {
  background-color: rgba(75, 192, 192, 0.1);
  color: #4bc0c0;
}

.comments-icon {
  background-color: rgba(255, 159, 64, 0.1);
  color: #ff9f40;
}

.stat-info h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #666;
}

.stat-number {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
  color: var(--dark-color, #333);
}

.stat-description {
  font-size: 0.9rem;
  color: #888;
}

/* 最近活动样式 */
.recent-activity {
  margin-bottom: 2.5rem;
}

.section-title {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  color: var(--dark-color, #333);
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background-color: #fafafa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.activity-item:hover {
  background-color: #f5f5f5;
}

.activity-icon {
  font-size: 1.3rem;
  min-width: 24px;
  display: flex;
  align-items: center;
}

.activity-text {
  margin-bottom: 0.3rem;
  color: #444;
}

.activity-time {
  font-size: 0.85rem;
  color: #888;
}

.highlight {
  color: var(--primary-color, #c53030);
  font-weight: bold;
}

/* 快捷操作样式 */
.action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-button:hover {
  background-color: #f9f9f9;
  border-color: #d0d0d0;
}

.button-icon {
  font-size: 1.3rem;
}

.button-text {
  font-weight: bold;
  color: #444;
}

/* 功能区占位符样式 */
.function-placeholder {
  background-color: #f9f9f9;
  border: 1px dashed #ddd;
  border-radius: 8px;
  padding: 3rem;
  text-align: center;
  color: #888;
}

/* 数据表格样式 */
.table-container {
  overflow-x: auto;
  margin-bottom: 2rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.data-table th,
.data-table td {
  padding: 0.8rem 1rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.data-table th {
  background-color: #f5f5f5;
  font-weight: bold;
  color: #444;
}

.data-table tr:hover {
  background-color: #f9f9f9;
}

/* 加载和错误提示样式 */
.loading-indicator,
.error-message,
.no-data-message {
  padding: 2rem;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.error-message {
  color: #c53030;
  background-color: rgba(197, 48, 48, 0.1);
}

.reload-btn {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 评论管理样式 */
.comments-toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.search-box {
  display: flex;
  flex: 1;
  min-width: 250px;
}

.search-box input {
  flex: 1;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}

.search-btn {
  padding: 0.8rem 1rem;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.filter-options select {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 200px;
}

.page-comments {
  margin-bottom: 2rem;
}

.page-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}

.comment-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comment-item {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.comment-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comment-user .user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
}

.comment-time {
  color: #888;
  font-size: 0.9rem;
}

.comment-content {
  margin-bottom: 0.8rem;
  line-height: 1.5;
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.action-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.delete-btn:hover {
  color: #c53030;
}

.flag-btn:hover {
  color: #e6a23c;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .admin-container {
    flex-direction: column;
    height: auto;
  }

  .admin-sidebar {
    width: 100%;
    height: auto;
    overflow: visible;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .admin-nav {
    max-height: 300px;
    overflow-y: auto;
  }

  .admin-content {
    min-height: auto;
  }

  .admin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .header-actions {
    align-self: flex-end;
  }

  .stat-cards {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    grid-template-columns: 1fr;
  }

  .comments-toolbar {
    flex-direction: column;
  }

  .admin-logout {
    position: relative;
    bottom: auto;
  }
}
</style>
